<template>
  <div class="banner" :style="{ backgroundImage: `url(${imageUrl}?imageView&blur=40x20)` }">
    <div class="container">
      <!-- 轮播图内容的左部分 -->
      <div class="left">
        <img :src="imageUrl" />
        <div class="dots">
          <div class="dot" :class="{ 'dot-active': currentIndex == index }" v-for="(item, index) in banners" :key="index" @click="botclick(index)" :name="fade"></div>
        </div>
      </div>
      <!-- 轮播图内容的右部分 -->
      <div class="right">
        <Download></Download>
      </div>
      <!-- 箭头部分 -->
      <div class="pre" @click="prePic"></div>
      <div class="next" @click="nextPic"></div>
    </div>
  </div>
</template>

<script>
import Download from '@/components/Download.vue'
export default {
  data() {
    return {
      name: 'SlideShow',
      // 轮播图所需要的图片
      banners: [],
      // 图片的第几张
      index: 0,
      imageUrl: '',
      fade: '',
      currentIndex: 0
    }
  },
  created() {
    this.getBanner()
  },
  mounted() {
    setInterval(() => this.nextPic(), 3000)
  },
  methods: {
    async getBanner() {
      const { data: res } = await this.$http.get('/banner')
      this.banners = res.banners
      this.imageUrl = res.banners[this.index].imageUrl
      console.log(res)
    },
    nextPic() {
      this.fade = 'fade'
      if (this.index === this.banners.length - 1) {
        this.index = 0
      }
      this.imageUrl = this.banners[this.index].imageUrl
      this.index++
      // setTimeout(() => {
      //   this.bgImg = `url(${this.banners[this.currentIndex].imageUrl}?imageView&blur=40x20)`
      // }, 700)
    },
    prePic() {
      this.fade = 'fade'
      if (this.index === 0) {
        this.index = this.banners.length - 1
      }
      this.imageUrl = this.banners[this.index].imageUrl
      this.index--
      // setTimeout(() => {
      //   this.bgImg = `url(${this.banners[this.currentIndex].imageUrl}?imageView&blur=40x20)`
      // }, 700)
    },
    botclick() {
      // this.fade = ''
      this.currentIndex = index
    }
  },
  components: {
    Download
  }
}
</script>

<style scoped>
.fade-enter-active {
  transition: all 300ms linear 700ms;
}
.fade-leave-active {
  transition: all 700ms;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-leave,
.fade-enter-to {
  opacity: 1;
}

.banner {
  width: 100%;
  height: 285px;
}
.container {
  position: relative;
  display: flex;
  width: 980px;
  margin: auto;
  height: 100%;
}
/* 左边部分 */
.left {
  width: 730px;
  background-color: royalblue;
}
.left img {
  width: 100%;
  height: 100%;
}

/* 轮播图下面的小点 */
.dots {
  width: 730px;
  display: flex;
  justify-content: center;
  position: absolute;
  /* background-color: red; */
  bottom: 2px;
}
.dot {
  width: 20px;
  height: 20px;
  background: url('https://s2.music.126.net/style/web2/img/index/banner.png?d76d1f98ff896dd5fd21d470b1d7b985') no-repeat 3px -343px;
  margin-left: 5px;
}
.dot:hover,
.dot-active {
  width: 20px;
  height: 20px;
  background-position: -16px -343px;
}

/* 右边部分 */
.right {
  background-color: seagreen;
  flex-grow: 1;
}
.pre {
  position: absolute;
  top: 50%;
  left: -50px;
  transform: translateY(-50%);
  width: 37px;
  height: 63px;
  background: url(https://s2.music.126.net/style/web2/img/ie6/arrl.png?=1);
}
.next {
  position: absolute;
  top: 50%;
  right: -50px;
  transform: translateY(-50%);
  width: 37px;
  height: 63px;
  background: url(https://s2.music.126.net/style/web2/img/ie6/arrr.png?=1);
}
</style>
